<template>
    <view class="step-select-pet-breed">
        <view class="header">
            <view class="search">
                <view :class="['search-box', { focused: isSearchFocused }]">
                    <uni-icons type="search" size="20" color="#999" />
                    <input
                        class="search-input"
                        type="text"
                        :value="searchKeyword"
                        placeholder="搜索品种（中文/拼音/英文）"
                        placeholder-style="font-size: 26rpx; padding-left: 10px"
                        confirm-type="search"
                        @focus="isSearchFocused = true"
                        @blur="isSearchFocused = false"
                        @input="onSearchInput"
                        @confirm="onSearchConfirm"
                    />
                    <view v-if="searchKeyword" class="clear-btn" @click="clearSearch">
                        <uni-icons type="closeempty" size="18" color="#bbb" />
                    </view>
                </view>
            </view>
        </view>

        <scroll-view class="content" scroll-y>
            <view v-if="filteredBreeds.length === 0" class="empty">
                <text>没有找到相关品种，尝试其它关键词</text>
            </view>
            <view v-else class="grid">
                <view
                    v-for="breed in filteredBreeds"
                    :key="breed.id"
                    class="grid-item"
                    :class="{ selected: selectedBreedId === breed.id }"
                    @click="selectBreed(breed)"
                >
                    <image class="thumb" :src="breed.image" mode="aspectFill"></image>
                    <text class="name">{{ breed.name }}</text>
                </view>
            </view>
        </scroll-view>

        <uni-forms label-position="top">
            <uni-forms-item label-width="100%" required label="请输入花色?">
                <uni-easyinput
                    v-model="breedColor"
                    type="text"
                    placeholder="请输入姓名"
                    primaryColor="#4AB8AC"
                />
            </uni-forms-item>
        </uni-forms>

        <view class="footer buttons">
            <i-button type="primary" plain @click="onPreStep" style="width: 100%">上一步</i-button>
            <i-button type="primary" :disabled="canNext" @click="onSave" style="width: 100%">下一步</i-button>
        </view>
    </view>
</template>

<script setup lang="ts">
import { usePetStore } from "@/store";

const petStore = usePetStore();

type Category = "dog" | "cat";

interface BreedItem {
    id: string;
    name: string;
    alias?: string[];
    category: Category;
    hot?: boolean;
    image: string;
}

const emits = defineEmits(["next", "pre"]);

const props = defineProps<{ category?: Category; height?: string | number }>();

const searchKeyword = ref<string>("");
const selectedBreedId = ref<string>("");
const isSearchFocused = ref<boolean>(false);

const canNext = computed(() => {
    return !selectedBreedId.value;
});

const breedColor = ref("");

const allBreeds = reactive<BreedItem[]>([
    {
        id: "golden",
        name: "金毛寻回犬",
        alias: ["Golden Retriever", "jinmao"],
        category: "dog",
        hot: true,
        image: "/static/images/breeds/golden.png"
    },
    {
        id: "corgi",
        name: "威尔士柯基犬",
        alias: ["Corgi", "korgi"],
        category: "dog",
        hot: true,
        image: "/static/images/breeds/corgi.png"
    },
    {
        id: "husky",
        name: "哈士奇",
        alias: ["Siberian Husky", "hashiqi"],
        category: "dog",
        image: "/static/images/breeds/husky.png"
    },
    {
        id: "samoyed",
        name: "萨摩耶",
        alias: ["Samoyed", "samoye"],
        category: "dog",
        image: "/static/images/breeds/samoyed.png"
    },
    {
        id: "ragdoll",
        name: "布偶猫",
        alias: ["Ragdoll", "buou"],
        category: "cat",
        hot: true,
        image: "/static/images/breeds/ragdoll.png"
    },
    {
        id: "british",
        name: "英短",
        alias: ["British Shorthair", "yingduan"],
        category: "cat",
        image: "/static/images/breeds/british.png"
    },
    {
        id: "persian",
        name: "波斯猫",
        alias: ["Persian", "bosi"],
        category: "cat",
        image: "/static/images/breeds/persian.png"
    },
    // 新增宠物品种数据
    {
        id: "labrador",
        name: "拉布拉多犬",
        alias: ["Labrador Retriever", "labuladuo"],
        category: "dog",
        hot: true,
        image: "/static/images/breeds/labrador.png"
    },
    {
        id: "poodle",
        name: "贵宾犬",
        alias: ["Poodle", "guidian"],
        category: "dog",
        image: "/static/images/breeds/poodle.png"
    },
    {
        id: "chihuahua",
        name: "吉娃娃",
        alias: ["Chihuahua", "jiewawa"],
        category: "dog",
        image: "/static/images/breeds/chihuahua.png"
    },
    {
        id: "german_shepherd",
        name: "德国牧羊犬",
        alias: ["German Shepherd", "deguemuyang"],
        category: "dog",
        image: "/static/images/breeds/german_shepherd.png"
    },
    {
        id: "siamese",
        name: "暹罗猫",
        alias: ["Siamese", "xianluo"],
        category: "cat",
        image: "/static/images/breeds/siamese.png"
    },
    {
        id: "maine_coon",
        name: "缅因猫",
        alias: ["Maine Coon", "mianyin"],
        category: "cat",
        image: "/static/images/breeds/maine_coon.png"
    },
    {
        id: "sphynx",
        name: "斯芬克斯猫",
        alias: ["Sphynx", "sifenkesi"],
        category: "cat",
        image: "/static/images/breeds/sphynx.png"
    }
]);

const filteredBreeds = computed(() => {
    const kw = searchKeyword.value.trim().toLowerCase();
    return allBreeds.filter((b) => {
        if (props.category && b.category !== props.category) return false;
        if (!kw) return true;
        const inName = b.name.toLowerCase().includes(kw);
        const inAlias = (b.alias || []).some((a) => a.toLowerCase().includes(kw));
        return inName || inAlias;
    });
});

const onSearchInput = ({ detail }: { detail: { value: string } }) => {
    searchKeyword.value = detail?.value ?? "";
};

const onSearchConfirm = () => {
    // 仅用于触发过滤，已通过 v-model 行为实现
};

const clearSearch = () => {
    searchKeyword.value = "";
};

const selectBreed = (breed: BreedItem) => {
    selectedBreedId.value = breed.id;
};

const onPreStep = () => {
    emits("pre", {
        type: "select-pet-breed",
        category: props.category ?? null,
        selected: selectedBreedId.value || null
    });
};

const onSave = () => {
    petStore.updateAddPetDetail({
        breed: searchKeyword.value
    });
    onNextStep();
};

const onNextStep = () => {
    const picked = allBreeds.find((b) => b.id === selectedBreedId.value);
    if (!picked) return;
    emits("next", {
        type: "step-select-pet-breed",
        category: props.category ?? null,
        selected: { id: picked.id, name: picked.name }
    });
};
</script>

<style scoped lang="scss">
@import "./index";
</style>
